<form class="layui-form layuimini-form" autocomplete="off" lay-filter="form_filter">
    <div class="layui-form-item">
        <label class="layui-form-label required">父级分类</label>
        <div class="layui-input-inline">
            <select name="pid" id="pid" lay-filter="select_filter">
                <option value="">选择父级分类</option>
                <option value="0">顶级分类</option>
                {volist name="cate" id="vo"}
                <option value="{$vo.id}" {if condition="$vo.id eq $pid" }selected{/if}>|--{$vo.name}</option>
                {notempty name="$vo.children"}
                {volist name="$vo.children" id="v"}
                <option value="{$v.id}" {if condition="$v.id eq $pid" }selected{/if}>&nbsp;&nbsp;||---{$v.name}</option>
                {/volist}
                {/notempty}
                {/volist}
            </select>
        </div>
    </div>
    <div class="layui-form-item">
        <div class="layui-form-label">选择图标</div>
        <div class="layui-input-block">
            <div class="layui-upload">
                <button type="button" class="layui-btn" id="upImg">上传图片</button>
                <div class="img_block" style="display: none">
                    <div style="width: 120px;display: none" class="progress">
                        <div class="layui-progress layui-progress-big" lay-showpercent="yes" lay-filter="progress">
                            <div class="layui-progress-bar" lay-percent=""></div>
                        </div>
                    </div>
                    <div class="layui-upload-list">
                        <img class="layui-upload-img" id="img">
                        <p id="imgText"></p>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label required">分类名称</label>
        <div class="layui-input-inline">
            <input type="text" class="layui-input" name="title" placeholder="填写分类名称">
        </div>
    </div>

    <div class="layui-form-item">
        <div class="layui-input-block">
            <button class="layui-btn layui-btn-normal" lay-submit lay-filter="saveBtn">确认保存</button>
        </div>
    </div>
</form>
<script>

    layui.use(['form', 'upload'], function () {
        const form = layui.form,
            layer = layui.layer,
            $ = layui.$,
            upload = layui.upload;
        //常规使用 - 普通图片上传
        const uploadInst = upload.render({
            elem: '#upImg'
            , field:'image'
            , url: "{:url('upload/image')}" //改成您自己的上传接口
            , before: function (obj) {
                //预读本地文件示例，不支持ie8
                obj.preview(function (index, file, result) {
                    $('#img').attr('src', result); //图片链接（base64）
                });
                $(".img_block").slideDown();
                $(".progress").show()
                element.progress('progress', '0%'); //进度条复位
                layer.msg('上传中', {icon: 16, time: 0});
            }
            , done: function (res) {
                //如果上传失败
                if (res.code != "{$result.success}") {
                    return layer.msg('上传失败');
                }
                //上传成功的一些操作
                //……
                $('#imgText').html('<input name="icon" value="'+res.data.url+'" type="hidden">'); //置空上传失败的状态
            }
            , error: function () {
                //演示失败状态，并实现重传
                var demoText = $('#imgText');
                demoText.html('<span style="color: #FF5722;">上传失败</span> <a class="layui-btn layui-btn-xs demo-reload">重试</a>');
                demoText.find('.demo-reload').on('click', function () {
                    uploadInst.upload();
                });
            }
            //进度条
            , progress: function (n, elem, e) {
                element.progress('progress', n + '%'); //可配合 layui 进度条元素使用
                if (n == 100) {
                    layer.msg('上传完毕', {icon: 1},function () {

                    });
                }
            }
        });
        //监听提交
        form.on('submit(saveBtn)', function (data) {
            let index = parent.layer.msg("提交中。。。", {icon: 16, shade: 0.5})
            const field = data.field;
            $.post("{:url('add')}", field, function (res) {
                parent.layer.close(index)
                if (res.code == "{$result.success}") {
                    layer.close(index)
                    layer.msg(res.msg, {icon: 6, shade: 0.5}, function () {
                        // let iframeIndex = parent.layer.getFrameIndex(window.name);
                        tao.close();
                        tao.father_reload();
                        // parent.layer.close(iframeIndex);


                    })
                } else {
                    parent.layer.msg(res.msg, {icon: 5, shade: 0.5})
                }
            });
            return false;
        });
        form.on('select(select_filter)', function (data) {
            console.log(data)
            console.log(data.elem); //得到select原始DOM对象
            console.log(data.value); //得到被选中的值
            console.log(data.othis); //得到美化后的DOM对象
        });

    });
</script>